<script>
import VueGridLayout from 'vue-grid-layout'
import ColumnItem from '@/livebos/container/item/ColumnItem.vue'
import { requestGet } from '@/api/system/common'

const GridLayout = VueGridLayout.GridLayout
const GridItem = VueGridLayout.GridItem
export default {
  name: 'DefaultContentBody',
  components: { ColumnItem, GridLayout, GridItem },
  data() {
    return {
      loading: false, // 全局Loading状态
      setting: true, // 是否打开设置
      dataList: [], // 栏目数据
      layout: {} // 系统布局数据
    }
  },
  created() {
    this.initLayout()
  },
  methods: {
    // 初始化，查询布局信息
    initLayout() {
      this.loading = true
      requestGet('rest/api/sys/livebos/v1/layout/layout').then(res => {
        const { data } = res
        if (undefined !== data && data !== null) {
          this.layout = data
          this.initColumn(this.layout.id)
        } else {
          this.loading = false
        }
      }).catch(() => {
        this.layout = {}
        this.loading = false
      })
    },
    // 初始化栏目信息
    initColumn(id) {
      requestGet('rest/api/sys/livebos/v1/column/user/columns', { lid: id })
        .then(res => {
          const { data } = res
          this.dataList = data
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 改变窗口大小
    resizedEvent(i, newH, newW) {
      this.dataList = this.dataList.map(item => {
        if (item.i === i) {
          item.w = newW
          item.h = newH
        }
        return item
      })
    },
    // 窗口移动后，新窗口信息
    movedEvent(i, newX, newY) {
      this.dataList = this.dataList.map(item => {
        if (item.i === i) {
          item.x = newX
          item.y = newY
        }
        return item
      })
    }
  }
}
</script>

<template>
  <div v-loading.fullscreen.lock="loading" class="live-bos-content">
    <grid-layout
      :layout="dataList"
      :col-num="16"
      :row-height="40"
      :auto-size="false"
      :is-draggable="setting"
      :is-resizable="setting"
      :use-css-transforms="true"
      :responsive="false"
      :use-style-cursor="false"
      :vertical-compact="true"
      :margin="[15, 15]"
    >
      <grid-item
        v-for="(item) in dataList"
        :key="item.id"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :style="{zIndex: item.zd}"
        @resized="resizedEvent"
        @moved="movedEvent"
      >
        <column-item :height="item.h" :column="item.id" />
      </grid-item>
    </grid-layout>
  </div>
</template>

<style scoped>
.live-bos-content {
  width: 100%;
  position: relative;
  height: auto;
}
</style>
